<template>
  <div class="register">
    <x-header style="background-color:#000;">注册
      <router-link  to="/login" slot="right">登录</router-link>
      <!-- <a slot="right">登录</a> -->
    </x-header>
    <h4>注册新用户</h4>
    <div class="input">
      <!-- <form action="/myp/user/reg" method="post"> -->
        <input type="text" placeholder="请输入用户名" name="username" v-model="username">
        <input type="password" placeholder="请输入密码" name="password" v-model="password">
        <group>
          <selector placeholder="请选择您的性别" v-model="sex" title="性别" :options="sexList" name="sex"></selector>
        </group>
        <!-- <input type="submit" value="注册"> -->
      <!-- </form> -->
      
      
      <button class="bg-orange" @click="register()">注册</button>
    </div>
  </div>
</template>
<script>
import {XHeader,Selector,Group} from 'vux'
import userApi from '../api/user.js'
export default {
  components:{
    XHeader,Selector,Group
  },
  data(){
    return {
      sex:"",
      sexList:['男','女'],
      username:"",
      password:""
    }
  },
  methods:{
    register(){
      let test=JSON.stringify({email:this.username,pw:this.password,gender:this.sex})
      console.log(test)
      userApi.register((res)=>{
        console.log(res)
        this.$router.push({path:'/login'})
      },(err)=>{},test)
    }
  }
}
</script>
<style lang="less" scoped>
  .register{
    h4{
      text-align: center;
      margin: 10vw auto 5vw;
    }
    .input{
      width: 90%;
      margin: 0 auto;
      input{
        width: calc(100% - 3vw);
        height: 11vw;
        border: 1px solid #e6e6e6;
        border-radius: 1vw;
        color: #666;
        margin-bottom: 5vw;
        padding-left: 3vw;
      }
      button{
        width: 100%;
        height: 11vw;
        color: #fff;
        border: 0;
        border-radius: 1vw;
        margin-top: 5vw;
      }
    }
  }
</style>